<template>
  <div class="contant-box">
    <el-button type="primary" style="width: 100%" @click="search">
      节点重要性分析
    </el-button>

    <div style="margin-top: 20px">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="calc(100vh - 320px)"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
      >
        <el-table-column prop="label" label="名称" width="180" />
        <el-table-column prop="important" label="重要性" />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
// vue
import { emitter } from "@/utils/mitt"; // 组件通讯
import { Algorithm } from "@antv/g6";

// 组件
import { ElMessage } from "element-plus";
import { useCanvasStoreHook } from "@/stores/modules/canvas"; // 画布
import { returnNodeSize } from "@/views/associationAnalysis/canvas/components/canvasG6/common/index";

const useCanvasStore = useCanvasStoreHook(); // 画布

const graphModule = inject("graphModule");

// console.log(useCanvasStore.getCanvasByData(), 9999);
const tableData = ref([]);

/** 查询分析 */
const search = () => {
  const { pageRank } = Algorithm;
  const nodes = JSON.parse(JSON.stringify(useCanvasStore.getCanvasByData()));
  let result = pageRank(nodes);
  // console.log(result, "result");

  tableData.value = [];
  returnNodeSize(); // 将图中节点还原成初始大小（节点重要性分析时会改变节点大小）

  Object.keys(result).forEach((item) => {
    let node = graphModule.value.findById(item);
    let nodeModel = node.getModel();
    // console.log(node, nodeModel);

    let model = {
      id: item,
      size:
        nodeModel.size * result[item] * 10 < 20
          ? 20
          : nodeModel.size * result[item] * 10,
    };
    node.update(model);

    let obj = {
      ...nodeModel,
      important: result[item],
    };
    tableData.value.push(obj);
  });
  tableData.value = tableData.value.sort((a, b) => b.important - a.important);
  console.log(tableData.value, "tableData");
};

/** 行移入事件 */
const cellMouseEnter = (row, column, cell, event) => {
  // console.log(row, column, cell, event);
  const nodeItem = row.id; // 获取鼠标进入的节点元素对象
  graphModule.value.setItemState(nodeItem, "active", true); // 设置当前节点的 hover 状态为 true
};

/** 行移出事件 */
const cellMouseLeave = (row, column, cell, event) => {
  // console.log(row, column, cell, event);
  const nodeItem = row.id; // 获取鼠标进入的节点元素对象
  graphModule.value.setItemState(nodeItem, "active", false); // 设置当前节点的 hover 状态为 true
};
</script>

<style lang="scss" scoped>
.contant-box {
  height: calc(100% - 36px);

  .edit-icon {
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
